<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 500px;
            height: 200px;
            margin: auto;
        }

        input {
            outline: none;
            width: 250px;
            height: 50px;
            font-size: 20px;
        }

        button {
            width: 50px;
            height: 30px;
        }
    </style>
    <!-- 
        回文字符串：是一个正读和反读都一样的字符串。‘ada 121 上海自来水来自海上’。
     -->
</head>

<body>
    <div class="main">
        <h3>判断输入的字符串是不是回文字符串</h3>
        <input type="text" name="" id="instr" placeholder="请输入一串字符串">
        <button>检查</button>
    </div>

</body>
<script>
    document.querySelector('button').onclick = function () {
        let str = document.getElementById('instr').value;
        if (isPalindrome(str)) {
            alert('输入的字符串是回文字符串');
        } else {
            alert('输入的字符串不是回文字符串');
        }
    }




    function isPalindrome(x) {
        let i, flag = true;
        for (i = 0; i < parseInt(x.length / 2); i++) {
            if (x[i] != x[x.length - 1 - i]) {
                flag = false;
            }
        }
        return flag;
    }
</script>

</html>